<template>
  <div class="app">
    <div class="container">
      <nav class="row">
        <div class="nav col-12 col-sm-2" style="padding-right:0;" id="nav-tab" role="tablist">
          <a class="col-3 col-sm-12 nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
             role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
          <a class="col-3 col-sm-12 nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
             role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
          <a class="col-3 col-sm-12 nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
             role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
        </div>
        <div class="nav-content col col-sm">
          <div class="accessory-result-page accessory-page">
            <div class="accessory-list">
              <ul class="row">
                <li class="col-6 col-md-3 p-1" v-for="item in list" :key="item.id">
                  <!--bootstrap要想col有边距，只能使用padding将子元素留白产生边距-->
                    <div class="card">
                      <img class="card-img-top" :src="item.img" alt="Card image cap"/>
                      <div class="card-body">
                        <h5 class="card-title">{{ item.title }}</h5>
                        <p class="card-text">{{ item.desc }}</p>
                        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script lang="ts">
import axios from 'axios';
import {Vue} from 'vue-property-decorator';

interface Data {
  list: any[];
}

export default Vue.extend({
  data(): Data {
    return {
      list: []
    };
  },
  methods: {
    getData() {
      axios.get('mock/data.json').then((req: any) => {
        this.list = req.data[0].list;
      });
    }
  },
  created() {
    this.getData();
  }
});


</script>
<style lang="scss" scoped>

@media (max-width: 575px) {
  .active {
    border: 1px solid #f1f1f1;
    border-bottom: 2px solid #fff;
    z-index: 1000;
  }

  .nav-content {
    border: 1px solid #f1f1f1;
    margin-top: -2px;
  }
}

@media (min-width: 576px) {
  .active {
    border: 1px solid #f1f1f1;
    border-right: 2px solid #fff;
    z-index: 1000;
  }

  .nav-content {
    border: 1px solid #f1f1f1;
    margin-left: -2px;
  }
  #nav-tab {
    display: inline;
  }
}

.accessory-list{
  >ul{
    > li {
      height:100%;
      list-style: none;
      .card:hover {
        border-color: #ee7a23;
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
        -webkit-box-shadow: 0 0 10px #999;
        box-shadow: 0 0 10px #999;
        -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
      }
      .card-img-top {
        padding: 6px;
      }
    }
  }
}


</style>
